<template>
  <div>
    <el-dialog :visible.sync="is_show" title="上传退款凭证" width="500px" center @closed="closed">
      <div class="mb10 must-item">退款凭证</div>
      <div>
        <up-load @upChange="upChange" v-if="is_show"></up-load>
      </div>
      <template slot="footer">
        <el-button @click="is_show = false">取消</el-button>
        <el-button type="primary" v-no-more-click:3000 @click="submit">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import upLoad from "~/components/upLoad";
import axios from "axios";
export default {
  components: {
    upLoad
  },
  data() {
    return {
      baseUrl: global.baseurl,
      is_show: false,
      fee_bill: null,
      order_id: 0
    };
  },
  methods: {
    showOn(data) {
      this.order_id = data.id;
      this.is_show = true;
    },
    submit() {
      if (!this.fee_bill) {
        return this.$message({
          type: "error",
          message: "请上传退款凭证"
        });
      }
      let form = new FormData();
      form.append("image", this.fee_bill);
      axios({
        method: "post",
        url: this.baseUrl + `/api/invoice/${this.order_id}/confirm/refund`,
        data: form,
        headers: {
          "Content-Type": "multipart/form-data",
          Authorization: "Bearer " + this.$store.state.token
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "确认退款成功！"
            });
            // res.data.data.consumer_pay_img = this.baseUrl + '/storage/upload/' + res.data.data.consumer_pay_img
            this.$emit("refresh");
            this.is_show = false;
          } else {
            this.$message({
              type: "error",
              message: res.data.message
            });
          }
        })
        .catch(e => {});
    },
    closed() {
      this.fee_bill = null;
    },
    upChange(data) {
      if (data.fileList.length > 0) {
        this.fee_bill = data.fileList[0].raw;
      } else {
        this.fee_bill = null;
      }
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.el-dialog {
  .el-dialog__body {
    height: 185px;
  }
  .el-dialog__footer {
    text-align: center;
  }
}
</style>
